<template>
    <div class="body">

        <div class="nav">
            <ul>
                <li>
                    <a href="">
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>宝宝培育</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>交流社区</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>个人中心</span>
                    </a>
                </li>
                <li>
                    <router-link to="/home/shopcar">
                        <span>购物车<i>{{$store.getters.getAllCount}}</i></span>
                    </router-link>
                </li>
                
                <li>
                    <router-link to="/home/register">
                        <span>注册</span>
                    </router-link>
                </li>
                <li>
                    <router-link to="/home/login">
                        <span>登录</span>
                    </router-link>
                </li>
               <li>
                    <a href="" @click="leave">
                        <span>退出登录</span>
                    </a>
                </li>
                <li>
                    <a href="">
                        <span>{{$store.getters.getusername}}</span>
                    </a>
                </li>
                
            </ul>
        </div>

        

        <transition>
		 <router-view></router-view>
	    </transition>



        </div>
    
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        leave(){
            var storege = window.localStorage;
            storege.clear()
        }
    }
}
</script>


<style>
    *{
        margin: 0;
        padding: 0;
    }
    
    ul{
        list-style: none;
        padding-left: 80px;
    }
    .nav i{
        color: #f10215;
    }
    .nav{
        height: 75px;
        background: url(images/nav22.jpg) repeat-x;
        
    }
    .nav li a{
        display: block;
        background: url(images/nav1.png) no-repeat;
        color: #fff;
        font-size: 14px;
        line-height: 33px;
        padding-left: 15px;
        text-decoration: none;
    }
    .nav li a:hover{
        background-image: url(images/nav3.png);
    }
    .nav li a:hover span{
        background-image: url(images/nav3.png);
    }
    .nav li{
        float: left;
        margin: 0 20px;
        padding-top: 21px;
    }
    .nav li:nth-child(8){
        float: right;
    }
    .nav li:nth-child(7){
        float: right;
    }
    .nav li:nth-child(6){
        float: right;
    }
    .nav li:nth-child(5){
        float: right;
    }
    .nav li:last-child{
        float: right;
    }
    
    .nav li a span{
        display: block;
        line-height: 33px;
        background: url(images/nav1.png) no-repeat right center;
        padding-right: 15px;
        
    }
</style>
